<template>
  <div>
    <!-- Video.js 播放器 -->
    <video
      ref="videoPlayer"
      class="video-js vjs-default-skin"
      :id="playerId"
      controls
      preload="auto"
    ></video>
  </div>
</template>

<script>
import videojs from 'video.js'
import 'video.js/dist/video-js.css'

export default {
  name: 'VideoPlayer',
  props: {
    options: {
      type: Object,
      required: true,
    },
    playerId: {
      type: String,
      default: 'videoPlayer',
    },
  },
  data() {
    return {
      playerInstance: null,
    }
  },
  mounted() {
    console.log(111)
    this.playerInstance = videojs(this.$refs.videoPlayer, this.options)

    // 监听播放器事件（可选）
    this.playerInstance.on('play', () => {
      console.log('视频播放中...')
    })

    this.playerInstance.on('pause', () => {
      console.log('视频已暂停...')
    })
  },
  beforeDestroy() {
    if (this.playerInstance) {
      this.playerInstance.dispose()
    }
  },
}
</script>

<style scoped>
/* 可选：自定义播放器样式 */
</style>